<script setup>
import { ref , reactive} from 'vue';

const tableData = ref( [
  {
    date: '2016-05-03',
    name: 'Tom',
    describe: 'No. 189, Grove St, Los Angeles',
    active: false
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    describe: 'No. 189, Grove St, Los Angeles',
    active: true
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    describe: 'No. 189, Grove St, Los Angeles',
    active: true
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    describe: 'No. 189, Grove St, Los Angeles',
    active: false
  },
])
// 搜索
const input = ref('')

// 抽屉
const drawer = ref(false)

// 抽屉开关
const showDrawer = ()=> {
    drawer.value = !drawer.value
}

// form表单
const ruleForm = reactive({
    course: [],
    grade: [],
    order: [],
    teacher: [],
    news: []
})

//表单验证
const rules = reactive({
     name: [
        {
        required: true,
        message: '信息不能为空',
        trigger: 'blur',
        }
    ],
    describe:[
        {
        required: true,
        message: '信息不能为空',
        trigger: 'blur', 
        }
    ]
})

// 表单提交
const submitForm = ()=> {
    console.log(123);
}

// 表单取消
const resetForm = ()=> {
    console.log(234);
}

// 弹窗
const dialogVisible = ref(false)
const handleClose = () => {
 
}
const showDialog=()=>{
  dialogVisible.value=!dialogVisible.value
}

// 新增
const addRole = ()=> {
   showDrawer()
}

//修改
const handleEdit = (e,i)=> {
    console.log(e);
    console.log(i);
    showDrawer()
}

//删除
const handleDelete = (e,i)=> {
    console.log(e);
    console.log(i);
    showDialog()
}

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)
const handleSizeChange = () => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = () => {
  console.log(`current page: ${val}`)
}
</script>

<template>
   <!-- 按钮搜索 -->
    <el-row>
        <el-col :span="16">
            <el-button type="primary" @click="addRole">新增角色</el-button>
            <el-button type="success">批量删除</el-button>
        </el-col>
        <el-col :span="8">
            <el-input
                v-model="input"
                placeholder="角色名"
                class="input-with-select"
                size="default"
            >       
            <template #append>
                <el-button>筛选</el-button>
            </template>
            </el-input>
        </el-col>
    </el-row>

  <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%; margin-top:10px; text-align:center">
        <el-table-column fixed label="#" width="60" type="selection"/>
        <el-table-column prop="name" label="角色名" width="200" />
        <el-table-column prop="describe" label="描述" width="350" />
        <el-table-column prop="active" label="启用状态" width="200">
            <template #default="scope">
                <el-switch
                    v-model="scope.row.active"
                    active-color="#13ce66"
                    inactive-color="#ccc"
                />
            </template>
        </el-table-column>
        <el-table-column prop="date" label="添加时间" width="300" />
        <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
                >修改</el-button
                >
                <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
            >
            </template>
        </el-table-column>
    </el-table>   

  <!-- 分页 -->
    <el-pagination
      v-model:currentPage="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px;"
    >
    </el-pagination>

    <!-- 弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="删除"
        width="30%"
        :before-close="handleClose"
    >
        <span>确定要删除数据?</span>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 抽屉弹出form -->
    <el-drawer
        v-model="drawer"
        title="新增数据"
        :close-on-click-modal="false"
        size="40%"
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
            :size="formSize"
        >
        <el-form-item label="角色名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="describe">
            <el-input v-model="ruleForm.describe" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="权限" />
        <el-form-item label="课程管理" prop="type">
            <el-checkbox-group v-model="ruleForm.course">
                <el-checkbox label="新增" name="type"></el-checkbox>
                <el-checkbox label="查看" name="type"></el-checkbox>
                <el-checkbox label="编辑" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
                <el-checkbox label="批量删除" name="type"></el-checkbox>
                <el-checkbox label="搜索" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="班级管理" prop="type">
            <el-checkbox-group v-model="ruleForm.grade">
                <el-checkbox label="查看" name="type"></el-checkbox>
                <el-checkbox label="编辑" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
                <el-checkbox label="导出" name="type"></el-checkbox>
                <el-checkbox label="批量删除" name="type"></el-checkbox>
                <el-checkbox label="搜索" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="订单管理" prop="type">
            <el-checkbox-group v-model="ruleForm.order">
                <el-checkbox label="查看" name="type"></el-checkbox>
                <el-checkbox label="搜索" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
                <el-checkbox label="导出" name="type"></el-checkbox>
                <el-checkbox label="批量删除" name="type"></el-checkbox>
                <el-checkbox label="取消" name="type"></el-checkbox>
                <el-checkbox label="处理退款" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="教师管理" prop="type">
            <el-checkbox-group v-model="ruleForm.teacher">
                <el-checkbox label="添加校区" name="type"></el-checkbox>
                <el-checkbox label="编辑校区" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
                <el-checkbox label="导出" name="type"></el-checkbox>
                <el-checkbox label="批量删除" name="type"></el-checkbox>
                <el-checkbox label="添加教师" name="type"></el-checkbox>
                <el-checkbox label="编辑教师" name="type"></el-checkbox>
                <el-checkbox label="删除教师" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="消息管理" prop="type">
            <el-checkbox-group v-model="ruleForm.news">
                <el-checkbox label="发布" name="type"></el-checkbox>
                <el-checkbox label="编辑" name="type"></el-checkbox>
                <el-checkbox label="删除" name="type"></el-checkbox>
                <el-checkbox label="搜索" name="type"></el-checkbox>
                <el-checkbox label="批量删除" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </el-form-item>
        </el-form>
    </el-drawer>
</template>

<style scoped>
.el-table >>> .el-table__cell {
    text-align: center;
}
</style>